import 'package:flutter/material.dart';
import '../../components/forms/input.dart';
import '../../theme/theme.dart';

/// 基本表单页面
/// 
/// 提供基础表单组件演示
class BasicFormsPage extends StatefulWidget {
  /// 构造函数
  const BasicFormsPage({Key? key}) : super(key: key);

  @override
  State<BasicFormsPage> createState() => _BasicFormsPageState();
}

class _BasicFormsPageState extends State<BasicFormsPage> {
  // 表单验证Key
  final _formKey = GlobalKey<FormState>();
  
  // 表单数据
  String _username = '';
  String _email = '';
  String _password = '';
  String _gender = '男';
  String _department = '技术部';
  bool _rememberMe = false;

  // 部门选项
  final List<String> _departments = ['技术部', '市场部', '销售部', '人事部', '财务部'];

  @override
  Widget build(BuildContext context) {
    final theme = HTheme.of(context);
    
    return Container(
      padding: const EdgeInsets.all(16.0),
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 页面标题
            Text(
              '基本表单',
              style: theme.textStyles.h2,
            ),
            const SizedBox(height: 16),
            
            // 说明文字
            Text(
              '这个页面展示了各种常用的表单组件和表单验证',
              style: theme.textStyles.body,
            ),
            const SizedBox(height: 24),
            
            // 基础表单卡片
            Card(
              elevation: 1,
              margin: const EdgeInsets.only(bottom: 24),
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '基础输入框',
                      style: theme.textStyles.h3,
                    ),
                    const SizedBox(height: 16),
                    
                    // 基础输入框示例
                    Form(
                      key: _formKey,
                      child: Column(
                        children: [
                          // 用户名输入框
                          HFormInput(
                            hintText: '请输入用户名',
                            labelText: '用户名',
                            prefixIcon: const Icon(Icons.person),
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return '请输入用户名';
                              }
                              if (value.length < 3) {
                                return '用户名至少3个字符';
                              }
                              return null;
                            },
                            onChanged: (value) {
                              setState(() {
                                _username = value;
                              });
                            },
                          ),
                          const SizedBox(height: 16),
                          
                          // 邮箱输入框
                          HFormInput(
                            hintText: '请输入邮箱',
                            labelText: '邮箱',
                            prefixIcon: const Icon(Icons.email),
                            keyboardType: TextInputType.emailAddress,
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return '请输入邮箱';
                              }
                              if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value)) {
                                return '请输入有效的邮箱地址';
                              }
                              return null;
                            },
                            onChanged: (value) {
                              setState(() {
                                _email = value;
                              });
                            },
                          ),
                          const SizedBox(height: 16),
                          
                          // 密码输入框
                          HFormInput(
                            hintText: '请输入密码',
                            labelText: '密码',
                            prefixIcon: const Icon(Icons.lock),
                            obscureText: true,
                            validator: (value) {
                              if (value == null || value.isEmpty) {
                                return '请输入密码';
                              }
                              if (value.length < 6) {
                                return '密码至少6个字符';
                              }
                              return null;
                            },
                            onChanged: (value) {
                              setState(() {
                                _password = value;
                              });
                            },
                          ),
                          const SizedBox(height: 24),
                          
                          // 提交按钮
                          ElevatedButton(
                            onPressed: () {
                              if (_formKey.currentState!.validate()) {
                                ScaffoldMessenger.of(context).showSnackBar(
                                  const SnackBar(content: Text('表单验证通过')),
                                );
                              }
                            },
                            child: const Text('提交'),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
            
            // 不同尺寸的输入框卡片
            Card(
              elevation: 1,
              margin: const EdgeInsets.only(bottom: 24),
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '不同尺寸的输入框',
                      style: theme.textStyles.h3,
                    ),
                    const SizedBox(height: 16),
                    
                    // 大号输入框
                    HInput(
                      hintText: '大号输入框',
                      size: HInputSize.large,
                    ),
                    const SizedBox(height: 16),
                    
                    // 正常输入框
                    HInput(
                      hintText: '正常输入框',
                      size: HInputSize.normal,
                    ),
                    const SizedBox(height: 16),
                    
                    // 小号输入框
                    HInput(
                      hintText: '小号输入框',
                      size: HInputSize.small,
                    ),
                    const SizedBox(height: 16),
                    
                    // 迷你输入框
                    HInput(
                      hintText: '迷你输入框',
                      size: HInputSize.mini,
                    ),
                  ],
                ),
              ),
            ),
            
            // 不同边框样式的输入框卡片
            Card(
              elevation: 1,
              margin: const EdgeInsets.only(bottom: 24),
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '不同边框样式的输入框',
                      style: theme.textStyles.h3,
                    ),
                    const SizedBox(height: 16),
                    
                    // 轮廓边框输入框
                    HInput(
                      hintText: '轮廓边框输入框',
                      borderType: HInputBorderType.outline,
                    ),
                    const SizedBox(height: 16),
                    
                    // 下划线边框输入框
                    HInput(
                      hintText: '下划线边框输入框',
                      borderType: HInputBorderType.underline,
                    ),
                    const SizedBox(height: 16),
                    
                    // 无边框输入框
                    HInput(
                      hintText: '无边框输入框',
                      borderType: HInputBorderType.none,
                    ),
                  ],
                ),
              ),
            ),
            
            // 特殊状态的输入框卡片
            Card(
              elevation: 1,
              margin: const EdgeInsets.only(bottom: 24),
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '特殊状态的输入框',
                      style: theme.textStyles.h3,
                    ),
                    const SizedBox(height: 16),
                    
                    // 禁用状态输入框
                    HInput(
                      hintText: '禁用状态输入框',
                      enabled: false,
                    ),
                    const SizedBox(height: 16),
                    
                    // 只读状态输入框
                    HInput(
                      value: '只读状态输入框',
                      readOnly: true,
                    ),
                    const SizedBox(height: 16),
                    
                    // 错误状态输入框
                    HInput(
                      hintText: '错误状态输入框',
                      errorText: '这是一个错误提示',
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
} 